﻿
@{
    ViewBag.Title = "Index";
    Layout = "~/Areas/Admin/Views/Shared/_LayoutList.cshtml";
}
<div class="form-inline">
    <span>类别</span>
    @Html.DropDownList("cateId", (SelectList)ViewBag.Cate, new { @class = "form-control" })
    <span>名称</span>
    <input type="text" name="name" id="name" class="form-control" value="" />
    <button class="btn btn-primary" id="btnQuery">查询</button>

    <button class="btn btn-success" id="btnCreate">添加</button>
</div>
<div>
    <table id="productTable" class="table table-bordered"> </table>
</div>
@*添加修改窗口*@
<div class="modal fade" id="productModal" tabindex="-1" role="dialog" >
    <div class="modal-dialog  modal-lg" >
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">添加</h4>
            </div>
            <div class="modal-body" style="height:500px">
                <iframe frameborder="0" src="" name="editForm" style="width:100%;height:100%"></iframe>
            </div>

        </div>
    </div>
</div>

@section styles{
    <link href="~/Content/bootstraptable/bootstrap-table.min.css" rel="stylesheet" />
    <style>
        .form-inline {
            margin: 5px auto;
            border: 1px solid #ddd;
            padding: 3px;
        }
    </style>
}
@section scripts{
    <script src="~/Content/bootstraptable/bootstrap-table.min.js"></script>
    <script src="~/Content/bootstraptable/bootstrap-table-zh-CN.min.js"></script>
    <script>

        function remove(id) {
                if (confirm('确定要删除吗？')) {
                    $.ajax({
                        url: '@Url.Action("delete")' + "/" + id,
                        success: function (res) {
                            alert(res.msg);
                            if (res.success) {
                                $("#productTable").bootstrapTable('refresh');
                            }
                        }
                    })
                }
        }
        // 修改
        function edit(id) {
             $('iframe').attr('src', '@Url.Action("Edit")/'+id);
                $('.modal-title').html("修改")
                $('#productModal').modal('show')
        }
        // 关闭弹出窗口并刷新数据
        window.closeModal = function () {
            $('#productModal').modal('hide')
            $("#productTable").bootstrapTable('refresh');
        }
        $(function () {
            $('#productTable').bootstrapTable({ // 初始化表格
                url: '/admin/product/getlist', // 获取数据的url地址
                type: 'get',
                striped: true,    //是否显示行间隔色
                pagination: true,   //是否显示分页（*）
                showPaginationSwitch: false,  //是否显示分页数
                sidePagination: "server",  //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1,    //初始化加载第一页，默认第一页
                pageSize: 5,       //每页的记录行数（*）
                pageList: [5, 10, 25], //可供选择的每页的行数（*）
                queryParamsType: '', //配合queryParams使用
                queryParams: function (param) {     // 设置查询参数

                    return {
                        pageSize: param.pageSize,  // 每页条数
                        pageIndex: param.pageNumber,  // 页码
                        name: $('#name').val(), // 图书名称
                        cateId: $('#cateId').val() // 类别
                    };
                },
                paginationPreText: "上一页",
                paginationNextText: "下一页",

                columns: [{   // 表格列
                    field: 'Id',
                    title: '编号',
                    width: '60px',
                },
                {
                    field: 'DefaultImage',
                    title: '图片',
                    width: '180px',
                    formatter: function (val, row, index) {
                        return `<img src="${val}" style="width:100px;"/>`
                    }
                },
                {
                    field: 'Name',
                    width: '200px',
                    title: '名称'
                },
                {
                    field: 'Brand',
                    title: '品牌'
                },
                {
                    field: 'LowPrice',
                    title: '最低价格'
                },
                {
                    title: '操作',
                    width:'250px',
                    formatter: function (val, row, index) {
                        return `<a href="@Url.Action("SetInfo")/${row.Id}" class="btn btn-primary">设置规格</a>
                            <button class="btn btn-success" onclick="edit(${row.Id})">修改</button >
                            <button class="btn btn-warning" onclick="remove(${row.Id})">删除</button>`;
                    }

                }]
            });

            $('#btnQuery').click(function () {
                $("#productTable").bootstrapTable('refresh');
            })
            // 添加
            $('#btnCreate').click(function () {
                $('iframe').attr('src', '@Url.Action("create")');
                $('.modal-title').html("添加")
                $('#productModal').modal('show')
            })


        })




    </script>
}

